<template>
  <div>
    <a-card
      style="width:100%"
      title="我的任务"
      :tab-list="tabList"
      :active-tab-key="key"
      @tabChange="key => onTabChange(key)"
    >
      <span slot="hourglass" slot-scope="item"> <a-icon type="hourglass" />{{ item.key }} </span>
      <span slot="car" slot-scope="item"> <a-icon type="car" />{{ item.key }} </span>
      <span slot="schedule" slot-scope="item"> <a-icon type="schedule" />{{ item.key }} </span>
    <WaitToDo ref="WaitToDo" :username="this.username" v-if="key==='待办事项'"></WaitToDo>
    <InTransitProcess ref="InTransitProcess" :username="this.username" v-if="key==='我的申请单'"></InTransitProcess>
    <LatelyClosedProcess ref="LatelyClosedProcess" :username="this.username" v-if="key==='我的已结束申请单'"></LatelyClosedProcess>
    </a-card>
  </div>
</template>

<script>

import WaitToDo from './WaitToDo'
import InTransitProcess from './InTransitProcess'
import LatelyClosedProcess from './LatelyClosedProcess'

export default {
  name: 'FlowProcess',
  components: {WaitToDo, InTransitProcess, LatelyClosedProcess},
  props: {
    username: ''
  },
  data () {
    return {
      tabList: [
        {
          key: '待办事项',
          scopedSlots: { tab: 'hourglass' }
        },
        {
          key: '我的申请单',
          scopedSlots: { tab: 'car' }
        },
        {
          key: '我的已结束申请单',
          scopedSlots: { tab: 'schedule' }
        }
      ],
      key: '待办事项'
    }
  },
  methods: {
    onTabChange (key) {
      this.key = key
    },
    refreshList () {
      this.$refs.WaitToDo.fetch()
    }
  }
}
</script>
